var index = 0;
var prev = 0;
var t = null;

var slide_box = document.querySelector(".slide-box")
var slides = document.querySelectorAll(".slide");
var button_next = document.querySelector(".button-next");
var button_prev = document.querySelector(".button-prev");



function bindEvent() {
    button_next.addEventListener("click", addIndex);
    button_prev.addEventListener("click", reduceIndex);

    slide_box.addEventListener("mouseover", function() {
        stop();
    })
    slide_box.addEventListener("mouseout", function() {
        autoPlay();
    })
}

function addIndex() {
    prev = index;
    if (index === slides.length - 1) {
        index = 0;
    } else {
        index++;
    }
    // console.log(prev, index);
}

function reduceIndex() {
    prev = index;
    if (index === 0) {
        index = slides.length - 1;
    } else {
        index--;
    }
}

function changeClass() {
    reset();
    slides[index].classList.add("active");
    slides[prev].classList.add("prev");
}

function reset() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].classList.remove("active", "prev");
        // pagination_bullets[i].classList.remove("active");
    }
}

function changeBanner() {
    slides[index].style.opacity = 0;

    animate(slides[index], {
        opacity: 1
    })
}

function autoPlay() {
    t = setInterval(function() {
        button_next.dispatchEvent(new Event("click"));
        changeBanner();
        changeClass();
    }, 3000)
}

function stop() {
    clearInterval(t);
}

bindEvent();
autoPlay();